<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品管理</title>
    <style>
        .p-img {
            width: 100px;
        }
    </style>
    <script src="./jquery.min.js"></script>
    <script src="./template.js"></script>
    <script>
        function loadData(pageNum) {
            $.ajax({
                url:"/wbs20052/ajax/day02/productManage.php",
                type: "post",
                dataType: "json",
                data: {pageNum},
                success: function(result) {
                    // 显示数据
                    initData(result);
                    // 初始化分页按钮
                    initBtn(result.pageNum, result.totalPage);
                },
                error: function(jqXHR){
                    console.log(jqXHR);
                }
            });
        }
        // 初始化数据
        function initData(data) {
            $("#total").text(data.total);
            var pArr = data.data;
            $("#tb").empty();// 清空上一页数据
            var html = template("proTemplate", data);
        //     for(let p of pArr){
        //         let txt = `<tr>
        //     <td>${p.p_id}</td>
        //     <td>${p.p_name}</td>
        //     <td>${p.p_info}</td>
        //     <td>${p.p_price}</td>
        //     <td>${p.p_unit}</td>
        //     <td>
        //         <img class="p-img" src="${p.p_image_url}" alt="no image">
        //     </td>
        // </tr>`;
                $("#tb").append(html);
            // }
        }
        // 初始化分页按钮
        function initBtn(pageNum, totalPage) {
            $("#pageBtn").empty(); // 清空
            // 当前页码大于1，才会有上一页
            if(pageNum > 1){
                var preBtn = `<a href="javascript:loadData(${pageNum-1});">上一页</a>`;
                $("#pageBtn").append(preBtn);
            }
            // 当前页码小于总页数，才会有下一页
            if(pageNum < totalPage){// 当前页码小于总页数，才会有下一页
                var nextBtn = `<a href="javascript:loadData(${pageNum+1});">下一页</a>`;
                $("#pageBtn").append(nextBtn);
            }
        }
        $(function(){
            loadData(1);// 默认查询第一页数据
        });
    </script>
</head>
<body>
    <h2>商品管理</h2>
    <div>总商品数量：<span id="total" ></span></div>
    <table border="1" >
        <thead>
            <tr>
                <th>序号</th>
                <th>编号</th>
                <th>名称</th>
                <th>简介</th>
                <th>单价</th>
                <th>单位</th>
                <th>图片</th>
            </tr>
        </thead>
        <tbody id="tb" >
            
        </tbody>
    </table>
    <script id="proTemplate" type="text/html">
        {{each data p index}}
        <tr>
            <td>{{(pageNum-1)*2 + index+1}}</td>
            <td>{{p.p_id}}</td>
            <td>{{p.p_name}}</td>
            <td>{{p.p_info}}</td>
            <td>{{p.p_price}}</td>
            <td>{{p.p_unit}}</td>
            <td>
                <img class="p-img" src="{{p.p_image_url}}" alt="no image">
            </td>
        </tr>
        {{/each}}
    </script>
    <div id="pageBtn" >

    </div>
</body>
</html>